<template>
  <div class="articleManage_main">
    <div class="sx">
      <div>
        <span>公告内容:</span>
        <el-input clearable v-model="noticeSX.text" placeholder="请输入公告内容" style="width: 200px"/>
      </div>
      <el-pagination
          style="position: absolute;right: 0; bottom: 0"
          v-model:current-page="noticeSX.currentPage"
          :size="'default'"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
      <el-button type="primary" @click="getNotice">搜索</el-button>
      <el-button type="primary" @click="showAddDialog">新增</el-button>
    </div>
    <div class="mx">
      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="notices" stripe style="width: 100%" height="700px">
          <el-table-column label="公告ID" align="center" prop="id" width="150px">
          </el-table-column>
          <el-table-column label="公告内容" align="center" prop="text" width="350px">
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="sendUser.userName"/>
          <el-table-column label="创建日期" align="center" prop="createTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="danger" @click="articleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <!-- 新增公告对话框 -->
  <el-dialog
      v-model="dialogVisible"
      title="新增公告"
      width="30%"
      center
  >
    <el-form :model="addForm" label-width="80px">
      <el-form-item label="公告内容">
        <el-input
            v-model="addForm.text"
            type="textarea"
            :rows="4"
            placeholder="请输入公告内容"
            clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNotice">提交</el-button>
        </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {parseTime} from "@/tool/utils.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {addNoticeApi, deleteNoticeApi, getNoticeAllApi} from "@/api/noticeApi.js";

const total = ref(0)
const noticeSX = ref({
  currentPage: 1,
  pageSize: 10,
  text: ''
})
const notices = ref([])

onMounted(() => {
  initData()
})

function initData() {
  getNotice()
}

function getNotice() {
  getNoticeAllApi(noticeSX.value).then(res => {
    notices.value = res.data.noticeList
    total.value = res.data.total
  })
}


//切页数
function handleCurrentChange(currentPage) {
  noticeSX.value.currentPage = currentPage
  getNotice()
}


function articleDelete(id) {
  ElMessageBox.confirm(
      '你确定要删除这个公告吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteNoticeApi(id).then(res => {
          ElMessage({message: res.msg, type: 'success'})
          getNotice()
        })
      })

}

const dialogVisible = ref(false)
const addForm = ref({
  text: '',
  sendUserId:0,
  read:'0',
  noticeType:'system'
})

function showAddDialog() {
  addForm.value.text = ''
  dialogVisible.value = true
}

function submitNotice() {
  addNoticeApi(addForm.value).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    dialogVisible.value = false
    getNotice()
  })
}
</script>

<style scoped>
.articleManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  position: relative;
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>